<template>
	<view class="poster">
		<view class="tab">
			<view class="tabbar"></view>
			<view class="occupy"></view>
			<view class="navigation-bar" :class="$isPC ? 'IsPC':''">
				<view class="left" @click="goBack()">
					<!-- <text class="iconfont icon-back"></text> -->
					<i class="uni-btn-icon" style="color: #FFFFFF; font-size: 27px;"></i>
				</view>
			</view>
		</view>
		<image :class="$isPC ? 'IsPC':''" class="poster-bg" src="../../../static/images/poster-bg.png" mode=""></image>
		<view class="poster-c">
			<view class="poster-title">
				<view class="title">
					<text>朋友扫我的码下载</text>
					<text>转客盟</text>
				</view>
				<view class="toast">
					<text>你必得10长算力</text>
				</view>
				<view class="toast-c">
					<text>好友扫你的码也得10长算力</text>
				</view>
			</view>
			<view class="poster-conter">
				<view class="poster-head">
					<image :src="userInfo.avatar?userInfo.avatar:require('../../../static/images/avatar.png')" mode=""></image>
					<text>{{userInfo.username}}</text>
					<text>邀请好友扫码</text>
				</view>
				<view class="erweima">
					<tki-qrcode cid="qrcode1" ref="qrcode" 
					:val="url" 
					:size="size" 
					:unit="unit" 
					:background="background" 
					:foreground="foreground" 
					:pdground="pdground" 
					:icon="icon" 
					:iconSize="iconsize" 
					:lv="lv" 
					:onval="onval" 
					:loadMake="loadMake" 
					:usingComponents="true"/>
				</view>
				<view class="gj">
					<text>好友可用「支付宝、浏览器」扫一扫</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/uni_modules/tki-qrcode/tki-qrcode.vue'
	import {logo} from '@/utils/base64.js'
	import {
		mapState
	} from "vuex"
	export default {
		components:{
			tkiQrcode
		},
		name: "poster",
		data() {
			return {
				url: "",
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: logo, // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
			}
		},
		onLoad() {
			this.url = this.$baseURL + '/#/pages/entrance/register/register?code=' + this.userInfo.invitation_code;
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
		},
		computed: {
			...mapState(['userInfo', 'isLogin']),
		}
	}
</script>
<style scoped lang="less" src="./poster.less">
</style>
